
/*
    使用服务器端打开页面的步骤：
        1. 在当前目录 ， 按住shift键点击鼠标右键 ， 打开powershell窗口
        2. 先试用 npm install http-server -g 安装环境
        3. 执行 http-server
        4. 如果报执行策略出错 ， 
            1. 在powerShell中输入 get-executionpolicy
            2. 如果返回是restricted ， 那么就输入set-ExecutionPolicy RemoteSigned
            3. 然后输入y
            4. 然后输入get-executionpolicy  结果就是RemoteSigned
*/

/**
 * 前端后端分离的web引用
 * 页面是服务端程序返回的
 * 浏览器解析网页 ， fetch来发起网络请求
 * 
 */

/*
    fetch的基本用法： fetch(url).then().catch()
    fetch('https://api.github.com/users/ruanyf') .then(response => response.json()) .then(json => console.log(json)) .catch(err => console.log('Request Failed', err));
    比如上面的例子： 
        上面的response是一个dream对象 ， response.json()是一个异步操作，取出所有内容，并将其转为 JSON 对象。
        
*/ 

fetch("./data.json").then(response => response.json()).then((data) => {
    console.log(data);
    console.log(123456);
    let musicList = data.musicList;
    let box = document.getElementsByClassName("box")[0];
    for(let i = 0 ; i < data.musicList.length ; i++) {
        let item = document.createElement("div");
        let musicObj = musicList[i];
        item.classList.add("item");
        for(var key in musicObj) {
            let div = document.createElement("div");
            div.innerHTML = musicObj[key];
            console.log(musicObj[key]);
            item.appendChild(div);
        }
        box.appendChild(item);
    }
});